<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹性容器</title>
        <style type="text/css">
            .wrapper{ margin: 25px auto; border: 1px solid blue; box-shadow: 0 0 20px -10px blue;}
            p { text-align: center; font-weight: bold;}
            /* 设置 display 为 flex 是为了让元素成为 弹性容器 (flex container) */
            .flex-container { display: flex; margin: 15px auto; border: 1px solid gray; width: 400px; height: 400px;}
            .flex-item:nth-child(2n) { background: #dfdfdf;}
            .flex-item:nth-child(2n+1) { background: #ff8;}

            .first { 
                /* 以 水平方向从左到右 为 弹性容器 的 主轴方向 */
                flex-direction: row;
                /* 因为主轴是水平方向从左到右，因此通过 flex-wrap 控制是否 `折行` */
                flex-wrap: wrap;
                /* 设置 弹性项目 在 弹性容器 主轴方向的排列方式 */
                justify-content: space-between;
                /* 设置 弹性项目 在 弹性容器 交叉轴方向的排列方式 */
                align-items: flex-start;

                align-content: center ;
            }
            .first span {
                /* 设置 弹性项目 在 弹性容器 主轴方向的尺寸 */
                flex-basis: 120px; 
                /* 让 弹性项目 中的 内容 水平居中排列 */
                text-align: center;
            }

            .second { flex-flow: row wrap; justify-content: space-between; }
            .second span { flex: 0 1 120px; text-align: center; }

            .one { 
                /* 以 垂直方向从上到下 为 弹性容器 的 主轴方向 */
                flex-direction: column; 
                /* 因为主轴是垂直方向从上到下，因此通过 flex-wrap 控制是否 `折列` */
                flex-wrap: wrap;
                /* 设置 弹性项目 在 弹性容器 主轴方向的排列方式 */
                justify-content: space-between;
                /* 设置 弹性项目 在 弹性容器 交叉轴方向的排列方式 */
                align-items: stretch;
            }
            .one span { 
                flex-basis: 120px; 
                text-align: center;
            }

            .two { flex-flow: column wrap; justify-content: space-between; }
            .two span { flex: 0 1 120px; text-align: center; }
        </style>
    </head>
    <body>
        
        <div class="wrapper">
            <p>弹性容器的主轴(main axis)是水平方向从左到右(flex-direction: row)</p>
            <div class="flex-container first">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
                <span class="flex-item">1</span>
                <span class="flex-item">2</span>
                <span class="flex-item">3</span>
                <span class="flex-item">甲</span>
                <span class="flex-item">乙</span>
                <span class="flex-item">丙</span>
            </div>

            <div class="flex-container second">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
                <span class="flex-item">1</span>
                <span class="flex-item">2</span>
                <span class="flex-item">3</span>
                <span class="flex-item">甲</span>
                <span class="flex-item">乙</span>
                <span class="flex-item">丙</span>
            </div>
        </div>

        <div class="wrapper">
            <p>弹性容器的主轴(main axis)是垂直方向从上到下(flex-direction: column)</p>
            <div class="flex-container one">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
                <span class="flex-item">1</span>
                <span class="flex-item">2</span>
                <span class="flex-item">3</span>
                <span class="flex-item">甲</span>
                <span class="flex-item">乙</span>
                <span class="flex-item">丙</span>
            </div>

            <div class="flex-container two">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
                <span class="flex-item">1</span>
                <span class="flex-item">2</span>
                <span class="flex-item">3</span>
                <span class="flex-item">甲</span>
                <span class="flex-item">乙</span>
                <span class="flex-item">丙</span>
            </div>
        </div>
        
    </body>
</html>